<template>
  <div class="address-list">
    <nav-bar title="收货地址"></nav-bar>
    <div v-if="addressShow"
         class="address-content">
      <van-swipe-cell v-for="item,i in 3"
                      :key="i">
        <div class="address-item"
             @click="chooseAddress(i)">
          <div class="item-left">
            <li class="item-left-top">
              <span>姓名</span>
              <span>13344556677</span>
              <span>默认</span>
            </li>
            <li class="text-overflow_1-xzh">山东省淄博市临淄区临淄大道xxx号商会大厦1208</li>
          </div>
          <img :src="require('@/assets/image/order/edit.png')"
               @click.stop="editAddress(i)">
        </div>
        <template #right>
          <van-button square
                      type="danger"
                      @click="deleteAddress(i)"
                      text="删除" />
        </template>
      </van-swipe-cell>
    </div>
    <div v-if="!addressShow"
         class="address-empty">
      <img :src="require('@/assets/image/order/address_empty.png')"
           alt="">
      <span>您还没有添加地址哦，请先添加收货地址！</span>
    </div>
    <div class="address-list-footer">
      <span @click="addAddress">新增地址</span>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
export default {
  data () {
    return {
      addressShow: true,
    };
  },
  components: {
    NavBar
  },
  created () { },
  methods: {
    /**
     * @description: 新增地址
     * @param {*}
     * @return {*}
     */
    addAddress () {
      this.$router.push({ path: 'addressEdit' })
    },
    /**
     * @description: 编辑地址
     * @param {*} index
     * @return {*}
     */
    editAddress (index) {
      this.$router.push({ path: '/addressEdit', query: { id: index } })
    },
    /**
     * @description: 删除地址
     * @param {*} index
     * @return {*}
     */
    deleteAddress (index) {
      console.log('删除地址' + index);
      this.$dialog.confirm({
        message: '确定删除该收货地址吗？',
        confirmButtonText: '删除',
        confirmButtonColor: '#E85014'
      })
        .then(() => {
          console.log('删除');
        })
        .catch(() => {
          console.log('取消');
        });
    },
    /**
     * @description: 选择地址
     * @param {*} index
     * @return {*}
     */
    chooseAddress (index) {
      console.log('选择');
    },
  }
}

</script>

<style lang='scss' scoped>
.address-list {
  @include top-page;
  align-items: center;
  background-color: #eeeeee;
  .address-content {
    flex: 1;
    @extend .address-list;
    overflow-y: auto;
    .van-swipe-cell {
      width: 96%;
      height: 1.4rem;
      margin: 0.1rem 0;
      background-color: #ffffff;
      border-radius: 0.15rem;
      .van-button--square {
        height: 100%;
        background-color: #e85014;
      }
      .address-item {
        width: 100%;
        height: 1.4rem;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0.45rem;
        .item-left {
          flex: 1;
          height: 100%;
          @include flex-column;
          justify-content: center;
          .item-left-top {
            display: flex;
            align-items: center;
            &:first-child {
              margin-bottom: 0.1rem;
              span {
                font-size: 0.3rem;
                margin-right: 0.3rem;
                &:nth-child(2) {
                  font-size: 0.28rem;
                }
                &:last-child {
                  width: 0.55rem;
                  height: 0.3rem;
                  line-height: 0.3rem;
                  text-align: center;
                  font-size: 0.16rem;
                  color: #fefcfc;
                  background-color: #e85014;
                }
              }
            }
          }
          .text-overflow_1-xzh {
            width: 5.7rem;
          }
        }
        img {
          height: 0.3rem;
          width: 0.3rem;
          margin: 0 0 0 0.3rem;
        }
      }
    }
  }
  .address-empty {
    flex: 1;
    @include top-page;
    align-items: center;
    img {
      width: 2rem;
      height: 2.56rem;
      margin: 30% 0 5% 0;
    }
    span {
      font-size: 0.22rem;
      color: #666666;
    }
  }
  .address-list-footer {
    height: 1rem;
    width: 100%;
    @include flex-center;
    box-shadow: 1px 1px 3px rgba(1, 1, 1, 0.1);
    border-top: 1px solid rgba(1, 1, 1, 0.1);
    span {
      width: 6rem;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      background-color: #e85014;
      color: #ffffff;
      border-radius: 1rem;
    }
  }
}
</style>